<%- include("layouts/html_start") -%>
    <h1 class="text-3xl text-center mb-4">产品列表</h1>
    <div class="m-2">
        <form method="get" id="search_form">
            <input type="hidden" name="page" id="page" value="<%= page %>">
            <input type="hidden" name="per_page" id="per_page" value="<%= per_page %>">
            <input class="border py-1 px-2 w-[300px]" name="search_str" id="search_str" type="text" placeholder="输入产品名称、品牌或型号规格..." value="<%= search_str %>">
            <button class="ml-2 border py-1 px-2 hover:bg-gray-700 hover:text-gray-100">搜索</button>
            <a class="border ml-8 py-1 px-2 hover:bg-gray-700 hover:text-gray-100" href="/new-product">+ 新增产品</a>
        </form>
    </div>
    <table class="w-full border-2 border-collapse">
        <thead>
            <tr class="border-2 border-collapse">
                <th class="border-2 border-collapse p-4">产品编号</th>
                <th class="border-2 border-collapse p-4">名称</th>
                <th class="border-2 border-collapse p-4">品牌</th>
                <th class="border-2 border-collapse p-4">型号规格</th>
                <th class="border-2 border-collapse p-4"></th>
            </tr>
        </thead>
        <tbody>
            <% for(let p of products){ %>
                <tr class="border-2 border-collapse">
                    <td class="border-2 border-collapse p-4"><%= p.productNo %></td>
                    <td class="border-2 border-collapse p-4"><%= p.name %></td>
                    <td class="border-2 border-collapse p-4"><%= p.brand %></td>
                    <td class="border-2 border-collapse p-4"><%= p.spec %></td>
                    <td class="border-2 border-collapse p-4">
                        <a href="">修改</a>
                        <a href="">删除</a>
                    </td>
                </tr>
            <% } %>
        </tbody>
    </table>
    <div class="flex gap-4 mt-4 justify-end items-center">
        <% if(page_count>1){%>
        Per page count: <select id="sel_per_page">
            <option value="5" <%= per_page==5?"selected":"" %>>5</option>
            <option value="10" <%= per_page==10?"selected":"" %>>10</option>
            <option value="15" <%= per_page==15?"selected":"" %>>15</option>
            <option value="20" <%= per_page==20?"selected":"" %>>20</option>
        </select>
        <% } %>
        <span class="pager pager-first cursor-pointer hover:border hover:bg-gray-700 hover:text-gray-100 py-1 px-2 border">|&lt;</span><span class="pager pager-prev cursor-pointer hover:border hover:bg-gray-700 hover:text-gray-100 py-1 px-2 border">&lt;</span>
        Goto page:
        <select id="select_page" class="border w-[50px]">
            <% for(let i=1; i<=page_count; i++){%>
            <option value="<%=i%>" <%= i==page?"selected":"" %>><%=i%></option>
            <% } %>
        </select>
        <span class="pager pager-next cursor-pointer hover:border hover:bg-gray-700 hover:text-gray-100 py-1 px-2 border">&gt;</span><span class="pager pager-last cursor-pointer hover:border hover:bg-gray-700 hover:text-gray-100 py-1 px-2 border">&gt;|</span>
    </div>
    <script>       
        document.querySelectorAll("span.pager").forEach(el=>{       
            el.addEventListener("click",(e)=>{
                let page = parseInt(document.querySelector("#page").value)
                const page_count = parseInt(`<%= page_count %>` )
                
                
                if(e.target.classList.contains("pager-next")){
                     page = (page < page_count)? ++ page : page_count
                                      
                }
                else if(e.target.classList.contains("pager-last")){
                    page = page_count
                }
                else if(e.target.classList.contains("pager-prev")){
                    page = (page<=1)? 1: -- page 
                }
                else if(e.target.classList.contains("pager-first")){
                    page = 1
                }
                document.querySelector("#page").value = page
                document.querySelector("#search_form").submit()
            })
            
        })
        document.querySelector("#select_page").addEventListener("change",(e)=>{
            document.querySelector("#page").value = e.target.value
            document.querySelector("#search_form").submit()
        })
        document.querySelector("#sel_per_page").addEventListener("change",e=>{
            document.querySelector("#per_page").value=e.target.value
            document.querySelector("#page").value = 1
            document.querySelector("#search_form").submit()
        })
    </script>

<%- include("layouts/html_end") -%>